<!-- 商品分类列表 -->
<template>
	<s-layout title="资讯" tabbar="/pages/article/index" navbar="normal" tools="search" @search="onSearch"
		:defaultSearch="state.keyword">
		<view class="s-article">
			<view class="three-level-wrap ss-flex ss-flex-col ss-col-top" :style="[{ height: pageHeight + 'px' }]">
				<!-- 商品分类（上） -->
				<scroll-view class="side-menu-wrap" scroll-x scroll-anchoring>
					<view class="ss-flex" style="background: #fff;">
						<view class="menu-item ss-flex ss-row-center ss-col-center" v-for="(item, index) in state.articleList"
							:key="item.id" :class="[{ 'menu-item-active': index === state.activeMenu }]" @tap="onMenu(index)">
							<view class="menu-title ss-line-1">
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 商品分类（下） -->
				<scroll-view class="news-list-box" scroll-y :style="[{ height: (pageHeight-48) + 'px' }]"
					@scrolltolower="onScrolltolower" v-if="state.pagination.list?.length">
					<view class="news-item" @tap="jumpDetail(item.id)" v-for="(item,index) in state.pagination.list" :key="index">
						<view class="imgbox">
							<image :src="item.picUrl" mode="widthFix" style="width: 100%;border-radius: 10px;overflow: hidden;"
								lazy-load />
						</view>
						<view class="textbox">
							<view class="title" v-html="item.title"></view>
							<view class="date">{{ formatDate(item.createTime, 'YYYY-MM-DD') }}</view>
							<view class="browse">
								<img class="browseIcon" src="/static/img/article/browseCount.png" alt="" />
								{{ item.browseCount }}
							</view>
						</view>
					</view>
					<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
		      contentdown: '点击查看更多',
		    }" @tap="loadMore" />
				</scroll-view>

			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import defaultImg from '/static/defaultImg.png'
	import sheep from '@/sheep';
	import articleApi from '@/sheep/api/promotion/article';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash-es';
	import {
		resetPagination,
		formatDate,
		highlightSearchResult
	} from '@/sheep/util';

	const state = reactive({
		keyword: '',
		articleList: [], // 商品分类树
		activeMenu: 0, // 选中的一级菜单，在 articleList 的下标

		pagination: {
			// 商品分页
			total: [], // 商品总数
			list: [],
			pageNo: 1,
			pageSize: 6,
		},
		loadStatus: '',
	});

	// 隐藏原生tabBar
	uni.hideTabBar();

	const {
		safeArea
	} = sheep.$platform.device;
	const pageHeight = computed(() => safeArea.height - 44 - 50);

	// 加载商品分类
	async function getList() {
		const {
			code,
			data
		} = await articleApi.getArticleCategory();
		if (code !== 0) {
			return;
		}
		data.unshift({
			id: 0,
			name: "全部"
		})
		console.log(data)
		state.articleList = data
	}

	// 选中菜单
	const onMenu = (val) => {
		state.activeMenu = val;

		state.pagination.pageNo = 1;
		state.pagination.total = 0;
		state.pagination.list = [];
		state.activeMenu ? state.keyword = '' : null
		getNewsList();
	};

	// 加载新闻列表
	async function getNewsList() {
		// 加载列表
		state.loadStatus = 'loading';
		let parmas = {
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		}
		if (state.articleList[state.activeMenu].id) {
			parmas.categoryId = state.articleList[state.activeMenu].id
		}

		const res = await articleApi.getArticleListByCategory({
			...parmas
		});

		if (res.code !== 0) {
			return;
		}

		// 合并列表
		state.pagination.list = _.concat(state.pagination.list, res.data.list);
		state.pagination.total = res.data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}


	//跳转详情
	function jumpDetail(id) {
		sheep.$router.go('/pages/article/detail', {
			id: id
		})
	}

	// 搜索
	function onSearch(e) {
		state.keyword = e;
		emptyList();
		searchList();
	}
	async function searchList() {
		const res = await articleApi.getArticleSearch({
			keyword: state.keyword,
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		})
		if (res.code !== 0) {
			return;
		}
		// 高亮文本
		let highlightResult = highlightSearchResult(state.keyword, res.data.list)
		// 合并列表
		state.pagination.list = _.concat(state.pagination.list, highlightResult);

		state.pagination.total = res.data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}
	// 清空列表
	function emptyList() {
		state.activeMenu = 0
		resetPagination(state.pagination)
	}

	// 加载更多新闻
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		if (state.keyword) {
			searchList()
		} else {
			getNewsList();
		}
	}

	function onScrolltolower() {
		loadMore()
	}

	onLoad(async (params) => {
		await getList();

		// // 首页点击分类的处理：查找满足条件的分类
		// const foundCategory = state.articleList.find(category => category.id === params.id);
		// // 如果找到则调用 onMenu 自动勾选相应分类，否则调用 onMenu(0) 勾选第一个分类
		// onMenu(foundCategory ? state.articleList.indexOf(foundCategory) : 0);
		onMenu(0)
	});

	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	.s-article {
		:deep() {

			.side-menu-wrap {
				background-color: #f6f6f6;

				.menu-item {
					height: 48px;
					padding: 0 20px;
					flex-shrink: 0;
					position: relative;
					transition: all linear 0.2s;

					.menu-title {
						line-height: 32rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333;
						position: relative;
						z-index: 0;

						&::before {
							content: '';
							width: 64rpx;
							height: 12rpx;
							background: linear-gradient(90deg,
									var(--ui-BG-Main-gradient),
									var(--ui-BG-Main-light)) !important;
							position: absolute;
							left: -64rpx;
							bottom: 0;
							z-index: -1;
							transition: all linear 0.2s;
						}
					}

					&.menu-item-active {
						border-radius: 20rpx;

						&::before {
							content: '';
							position: absolute;
							right: 0;
							bottom: -20rpx;
							width: 20rpx;
							height: 20rpx;
							background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
						}

						&::after {
							content: '';
							position: absolute;
							top: -20rpx;
							right: 0;
							width: 20rpx;
							height: 20rpx;
							background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
						}

						.menu-title {
							font-weight: 600;

							&::before {
								left: 0;
							}
						}
					}
				}
			}

			.news-list-box {
				background-color: #fff;
			}

			.banner-img {
				width: calc(100vw - 130px);
				border-radius: 5px;
				margin-bottom: 20rpx;
			}

			.news-item {
				display: flex;
				flex-direction: column;
				padding: 15px;

				.imgbox {
					width: 100%;
				}

				.textbox {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;

					.title {
						width: 100%;
						font-size: 13px;
						line-height: 24px;
						color: #333;
					}

					.date {
						font-size: 12px;
						line-height: 20px;
						color: #666;
					}

					.browse {
						display: flex;
						align-items: center;
						font-size: 12px;
						line-height: 20px;
						color: #666;

						.browseIcon {
							width: 16px;
							height: 16px;
							margin-right: 6px
						}
					}
				}
			}
		}
	}
</style>